<template>
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapsed"
    :collapse-transition="false"
    class="side-menu"
    background-color="#C8E6C9"
    text-color="#2E7D32"
    active-text-color="#1B5E20"
  >
    <!-- 管理员菜单 -->
    <template v-if="userStore.isAdmin">
<!--      <el-menu-item index="/admin/dashboard" @click="handleRoute('/admin/dashboard')">-->
<!--        <el-icon><Monitor /></el-icon>-->
<!--        <template #title>-->
<!--          <span>管理控制台</span>-->
<!--        </template>-->
<!--      </el-menu-item>-->

<!--      <el-sub-menu index="admin-management">-->
<!--        <template #title>-->
<!--          <el-icon><Management /></el-icon>-->
<!--          <span>系统管理</span>-->
<!--        </template>-->
<!--        <el-menu-item index="/admin/users" @click="handleRoute('/admin/users')">-->
<!--          <el-icon><Avatar /></el-icon>-->
<!--          <span>用户管理</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/admin/roles" @click="handleRoute('/admin/roles')">-->
<!--          <el-icon><Lock /></el-icon>-->
<!--          <span>角色管理</span>-->
<!--        </el-menu-item>-->
<!--      </el-sub-menu>-->
      
      <el-menu-item index="/admin/advertisements" @click="handleRoute('/admin/advertisements')">
        <el-icon><Picture /></el-icon>
        <template #title>
          <span>广告申请管理</span>
        </template>
      </el-menu-item>
      
      <el-menu-item index="/admin/region-tree" @click="handleRoute('/admin/region-tree')">
        <el-icon><Location /></el-icon>
        <template #title>
          <span>户外广告总览配置</span>
        </template>
      </el-menu-item>
    </template>

    <!-- 学生菜单 -->
    <template v-else>
      <el-menu-item index="/chat" @click="handleRoute('/chat')">
        <el-icon><ChatDotRound /></el-icon>
        <template #title>
          <span>聊天</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/profile" @click="handleRoute('/profile')">
        <el-icon><UserFilled /></el-icon>
        <template #title>
          <span>个人信息</span>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import {
  Monitor,
  User,
  UserFilled,
  Setting,
  Management,
  Avatar,
  Lock,
  Document,
  List,
  Folder,
  ChatDotRound,
  Picture,
  Location
} from '@element-plus/icons-vue'

const props = defineProps<{
  isCollapsed: boolean
}>()

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const activeMenu = computed(() => {
  return route.path
})

const handleRoute = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.side-menu {
  border-right: none;
  user-select: none;
  width: 210px; /* 默认宽度 */
}

.side-menu.el-menu--collapse {
  width: 64px; /* 折叠时的宽度 */
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item) {
  &:hover {
    background-color: #A5D6A7 !important;
  }

  &.is-active {
    background-color: #81C784 !important;
    color: #1B5E20 !important;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: #1B5E20;
    }
  }
}

:deep(.el-sub-menu__title) {
  &:hover {
    background-color: #A5D6A7 !important;
  }
}

:deep(.el-menu-item .el-icon),
:deep(.el-sub-menu__title .el-icon) {
  width: 16px;
  height: 16px;
  margin-right: 16px;
  font-size: 16px;
}

/* 折叠时的图标样式 */
.el-menu--collapse {
  :deep(.el-sub-menu__title) {
    span {
      height: 0;
      width: 0;
      overflow: hidden;
      visibility: hidden;
      display: inline-block;
    }
  }
}
</style> 